<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>上传照片</title>
	</head>
	<body>
								<div class="col-md-10">
											<div class="form-group ">
													<label class="control-label col-md-3">图片上传</label>
													<div class="col-md-9">
														<div class="fileinput fileinput-new" data-provides="fileinput">
															<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
															</div>
															<div class="progress" style="margin-top:-5px;">
															  <div class="progress-bar progress-bar-success" style="width: 0%">
																<span class="percent">0%</span>
															  </div>
															</div>
															<div style="margin-top:-18px;">
																<span class="btn red btn-outline btn-file">
																	<span class="fileinput-new"> 选择 </span>
																	<span class="fileinput-exists"> 更改 </span>
																	<input type="file" id="singleFile"/>
																</span>
																<a onclick="upload()" class="btn red fileinput-exists">上传</a>
																<a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput"> 删除 </a>
															</div>
														</div>
													</div>
											</div>
								</div>
		  <script type="text/javascript">
			function upload(){
				$('#singleFile').ajaxImgUpload({
										url:"/testupload",
									   data:{name:'张学友'},
								   progress:{bar:$('.progress-bar'),percent:$('.percent')},//进度条
									success:function(data){console.log(data)}
				});
			}
		  </script>
	</body>
</html>